import { modal } from "@/components/CustomModal";
import IntegrationTable, {
	IntegrationTableProps,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import { Button, message, Space, Upload } from "antd";
import { getObject, isEmptyArray, isNotEmptyArray } from "phinney-toolkit";
import React, { useEffect } from "react";
import { importing } from "./service";

// @page 回收袋
const Recycling: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;

	const typeList = [
		{ label: "厨余垃圾", value: "10" },
		{ label: "其他垃圾", value: "20" },
	];

	const statusList = [
		{ label: "未绑定", value: "10" },
		{ label: "已绑定", value: "20" },
	];

	// 表格项
	const columns: ProColumns[] = [
		{
			title: "袋子code",
			dataIndex: "bagCode",
			search: false,
		},
		{
			title: "袋子数量",
			dataIndex: "count",
			search: false,
		},
		{
			title: "袋子类型",
			dataIndex: "type",
			valueEnum: {
				10: "厨余垃圾",
				20: "其他垃圾",
			},
		},
		{
			title: "状态",
			dataIndex: "status",
			valueEnum: {
				10: "未绑定",
				20: "已绑定",
			},
		},
	];

	const getFormItems = (vm: any, isEdit?: boolean): any[] => {
		const { coupon } = vm.state;
		return [
			{
				type: "text",
				label: "袋子code",
				name: "bagCode",
				required: true,
			},
			{
				type: "text",
				label: "袋子数量",
				name: "count",
				required: true,
			},
			{
				type: "select",
				label: "袋子类型",
				name: "type",
				required: true,
				options: typeList,
			},
			{
				type: "select",
				label: "状态",
				name: "status",
				required: true,
				options: statusList,
			},
		];
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "id",
		scroll: { x: 1000 },
		columns,
		listProps: {
			url: "/bag/page",
			method: "GET",
			requestType: "params",

			paramsHandle: (params: any) => {
				return {
					...params,
				};
			},
		},
		addProps: {
			url: "/bag/add",
			formProps: {
				labelCol: { span: 8 },
			},
			modalProps: {
				formProps: {
					labelCol: { span: 6 },
				},
				formItemsHandle: (_: any, vm: any) => {
					return getFormItems(vm);
				},
			},
			paramsHandle: ({ ...params }): any => {
				return {
					...params,
				};
			},
		},
		deleteProps: {
			url: "/bag/delete",
			method: "POST",
		},
		headerTitle: (add: any, table: any) => [
			<Space>
				{add}
				<Button
					type="primary"
					onClick={() => {
						window.location.href =
							"http://dd-eco-ai-picture.oss-cn-hangzhou.aliyuncs.com/20210629/垃圾袋数据导入模版.xlsx";
					}}
				>
					下载模板
				</Button>
				<Button
					type="primary"
					onClick={() => {
						let contentState: any;
						modal({
							title: "导入",
							content: {
								state: {
									fileList: [],
								},
								render: (vm: any) => {
									const { fileList } = vm.state;
									contentState = vm.state;
									const props: any = {
										showUploadList: false,
										beforeUpload: (file: any) => {
											const isExcel = [
												"application/vnd.ms-excel",
												"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
											].includes(file.type);
											if (!isExcel) {
												message.error("请上传excel文件！");
												return;
											}
											const isLt5M = file.size / 1024 / 1024 < 5;
											if (!isLt5M) {
												message.error("文件大小必须小于5MB！");
												return;
											}
											vm.setState({
												fileList: [file],
											});
											return false;
										},
										fileList,
									};
									return (
										<>
											<div
												style={{
													padding: "10px 0",
													display: "flex",
													alignItems: "center",
													justifyContent: "space-between",
												}}
											>
												<label>文件</label>
												<div
													style={{
														width: 320,
														marginRight: 15,
														lineHeight: "32px",
														textAlign: "center",
														border: "1px solid #d8d8d8",
													}}
												>
													{isNotEmptyArray(fileList)
														? fileList[0]?.name
														: "未上传"}
												</div>
												<Upload {...props} showFileList={false}>
													<Button type="primary">上传</Button>
												</Upload>
											</div>
											<div style={{ color: "red", marginLeft: 40 }}>
												注意: 仅支持5MB以下的excel文件
											</div>
										</>
									);
								},
							},
							onOk: async () => {
								const { fileList } = getObject(contentState);
								if (isEmptyArray(fileList)) {
									message.error("请先上传一个excel文件！");
								} else {
									const data = new FormData();
									data.append("file", fileList?.[0]);
									const res = await importing(data);
									if (res?.code === 200) {
										message.success("上传成功");
										table?.current?.reload();
										return true;
									}
								}
								return false;
							},
						});
					}}
				>
					导入
				</Button>
			</Space>,
		],
	};

	// 初始化加载数据
	useEffect(() => {
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Recycling;
